<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        动画
    </title>
</head>

<body onload="main()">
<canvas id="example" width="400" height="400" style="border: 1px solid red;"> canves</canvas>
<p>
    <button onclick="changed(1)">UP</button>
    <button onclick="changed(0)">DOWN</button>
</p>
<script src="../js/cuon-utils.js"></script>
<script src="../js/cuon-matrix.js"></script>
<script src="../js/webgl-debug.js"></script>
<script src="../js/webgl-utils.js"></script>
<script>

    function changed(up) {
        if (up == 1) {
            ANGLE_STEP += 5;
        } else {
            ANGLE_STEP -= 5
        }
        console.log(ANGLE_STEP)
    }

    /**
     *  x' = x cos b - y sin b
     *  y' = x sin b + y cos b
     *  z' = z
     *
     * @type {string}
     */

        // 顶点着色器
    var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +
        ' uniform mat4 u_ModelMatrix;\n' +
        ' void main() {\n' +
        ' gl_Position = u_ModelMatrix * a_Position;' +
        // ' gl_Position =  a_Position;' +
        '}\n';

    // 片元着色器
    var FSHADER_SOURCE =
        'void main() {\n' +
        ' gl_FragColor = vec4(1.0,1.0,0.0,1.0);\n' + // 设置颜色
        '}\n';

    var ANGLE_STEP = 30.0; // 设置旋转速度 （度/秒）

    function main() {

        var canves = document.getElementById("example");

        var gl = getWebGLContext(canves);

        // 初始化着色器
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.error("着色器加载错误")
            return;
        }

        // 设置顶点位置
        var n = initVertexBuffers(gl);

        if (n < 0) {
            console.error("error")
            return;
        }

        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');

        // 三角形的当前旋转角度
        var currentAngle = 0.0;

        var modelMatrix = new Matrix4();

        // 开始绘制三角形
        var tick = function () {
            currentAngle = animate(currentAngle); // 更新旋转角
            draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);
            /**
             * requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
             1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
             2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
             */
            requestAnimationFrame(tick); // 请求浏览器调用tick
        }
        tick();
    }

    /**
     * 三角形绘制方法
     * @param gl
     * @returns {number}
     */
    function initVertexBuffers(gl) {
        var vertices = new Float32Array([
            0.0, 0.0,
            0.0, 0.5,
            0.5, 0.5,
        ]);

        // 点的个数
        var n = vertices.length / 2;

        // 创建缓冲区对象
        var vertexBuffer = gl.createBuffer();

        if (!vertexBuffer) {
            console.error("缓冲区对象创建错误")
            return;
        }

        // 将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        // 向缓冲区对象中写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(gl.program, "a_Position");

        // 将缓冲区对象分配给 a_Position
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        // 链接 a_Position 变量与分配给它的缓冲区对象
        gl.enableVertexAttribArray(a_Position);

        return n;
    }

    /**
     * 绘制三角形
     * @param gl
     * @param n
     * @param currentAngle
     * @param modelMatrix
     * @param u_ModelMatrix
     */
    function draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix) {
        // 设置旋转矩阵
        modelMatrix.setRotate(currentAngle, 0, 0, 1);
        modelMatrix.translate(0.35, 0, 0)

        // 将旋转矩阵传输给顶点着色器
        gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);

        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.drawArrays(gl.TRIANGLES, 0, n);
    }

    var g_last = Date.now();

    /**
     * 计算距离上次调用经过多长时间
     * @param angle
     * @returns {number}
     */
    function animate(angle) {
        let now = Date.now();
        var elapsed = now - g_last;
        g_last = now;
        var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
        return newAngle %= 360;
    }

</script>
</body>

</html>